<template>
    <div class="an-page-children an-logo">
        <div class="an-body">
            <div class="an-title">登录</div>
            <van-form @submit="onSubmit" label-width="0" class="an-form">
                <van-field
                    v-model="username"
                    name="username"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="password"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                    立即登录
                    </van-button>
                </div>
            </van-form>
             <div class="an-paw">
                <div>忘记密码</div>
                <div @click="clickRegister">注册</div>
            </div>

        </div>
        <div class="an-bg"></div>
    </div>
</template>

<script>
import md5 from 'js-md5';
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    ...mapMutations([]),
    // 登录
    onSubmit(values) {
      let nd = {
        username:values.username,
        password: md5(values.password)
      };
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner'
      });
      this.$api.login(nd).then(res => {
        this.$toast.success('登录成功');
        this.$store.commit('SET_USERINFO',res);
        this.$store.commit('SET_ISLOGIN', true);
        // 将用户信息存储在本地缓存中
        localStorage.setItem('userInfo', JSON.stringify(res));
        this.$router.push({path:'/user'});
      });
    },
    clickRegister() {
      this.$router.push({path:'/register'});
    }
  }
};
</script>

<style lang="scss">
.an-logo{
    .van-cell{
        background: transparent;
        &::after{
            border: none;
        }
        .van-field__body{
            border-radius: 50px;
            background-color:rgba(0,0,0,0.2);
            overflow: hidden;
            .van-field__control{
                color: #ffffff;
                padding: 8px 15px;
            }
            input::placeholder {
                color: #ffffff;
            }
        }
    }
}
</style>

<style lang="scss" scoped>
.an-logo{
    .an-bg{
        position: absolute;
        left:0;
        right: 0;
        top:0;
        bottom: 0;
        background: url('../../assets/login_bg.jpg') no-repeat;
        background-size: cover;
        background-position: center 0;
        filter: blur(2px);
    }
    .an-body{
        position: relative;
        z-index: 1;
        padding-top:50px;
        .an-title{
            color: #ffffff;
            font-size: 24px;
            padding: 15px 20px;
        }
        .an-paw{
            padding: 10px 20px;
            justify-content: space-evenly;
            display: flex;
        }
    }
}
</style>